<template>
  <div class="xyz-item">
    <div class="xyz-label">{{ label }}</div>
    <div class="xyz-value">
      <!-- https://blog.csdn.net/Piqzem/article/details/88908096 -->
      <!-- 限制element-ui表单中input框只能输入数字和小数点 -->
      <el-input-number
        ref="input"
        v-model="data"
        :min="min"
        :max="max"
        :step="step"
        :precision="precision"
        :controls="false"
        controls-position="right"
        size="mini"
        placeholder="*多种*"
        @change="onChange"
        @keyup.enter.native="onEnter"
      />
    </div>
  </div>
</template>

<script>
export default {
  name: 'XyzItem',
  model: {
    prop: 'value',
    event: 'change'
  },
  props: {
    value: {
      type: Number,
      required: false,
      default: 0
    },
    label: {
      type: String,
      required: true
    },
    precision: {
      type: Number,
      required: false,
      default: 1 // 默认小数点后1位
    },
    // 最小值
    min: {
      type: Number,
      required: false,
      default: -Infinity
    },
    // 最大值
    max: {
      type: Number,
      required: false,
      default: Infinity
    }
  },
  data() {
    return {
      data: undefined
    }
  },
  computed: {
    step: function() {
      return 1 / Math.pow(10, this.precision)
    }
  },
  watch: {
    // 监控value的值
    value(val) {
      this.data = this.getData(val)
    },
    precision(val) {
      this.data = this.formatValue(this.data, val)
    }
  },
  created() {
    this.data = this.getData(this.value)
  },
  methods: {
    getData(val) {
      try {
        if (val !== null && val !== undefined) {
          const _val = parseInt(val)
          if (isNaN(_val)) {
            return undefined
          } else {
            return this.formatValue(_val, this.precision)
          }
        } else {
          return undefined
        }
      } catch (err) {
        return undefined
      }
    },
    formatValue(data, precision) {
      // https://www.cnblogs.com/Jacklovely/p/6554278.html
      const base = Math.pow(10, precision)
      return Math.round(data * base) / base
    },
    onChange(val) {
      // console.log('point-item.vue change:', val)
      // 更新data数据
      this.data = this.getData(val)
      if (typeof this.data === 'number') {
        // 向父组件发送change消息(参数需转换为json字符串!!!)
        this.$emit('change', this.data)
      }
    },
    onEnter(event) {
      this.data = this.getData(event.target.value)
      if (typeof this.data === 'number') {
        // 向父组件发送change消息(参数需转换为json字符串!!!)
        this.$emit('change', this.data)
      }
    }
    // onBlur(event) {
    //   // console.log('int.vue 失去焦点')
    //   if (this.inEdit) {
    //     // 强行夺回焦点
    //     this.$refs.input.focus()
    //   }
    // }
  }
}
</script>

<style lang="scss">
.xyz-item {
  margin: 1px 0 1px 5px;
  display: flex;
  flex-direction: row;
  align-items: center;
  .xyz-label {
    width: 16px;
  }
  .xyz-value {
    flex: 1;
  }
}
</style>
